<template>
  <div class="App">
    <Item title="美食">
      <template v-slot:default
        ><img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F006tz5IQgy1h6t128xg6sj30u011i40o.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671087312&t=6f773ea97d15258331d8df3e4393faba"
          width="180px"
          height="180px"
          alt=""
      /></template>

      <template v-slot:footer><h3>Footer</h3></template>
    </Item>
    <Item title="音乐">
      <template #default>
        <ul>
          <li v-for="item in list" :key="item.id">
            {{ item.content }}
          </li>
        </ul>
      </template>
      <template v-slot:footer><h3>Footer</h3></template>
    </Item>

    <Item title="运动">
      <template v-slot:default>
        <video src=""></video>
      </template>
      <template v-slot:footer><h3>Footer</h3></template>
    </Item>
  </div>
</template>

<script>
  import Item from "./components/Item.vue";
  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {
        list: [
          {
            id: "001",
            content: "民谣",
          },
          {
            id: "002",
            content: "摇滚",
          },
          {
            id: "003",
            content: "爵士",
          },
        ],
      };
    },
  };
</script>

<style scoped>
  .App {
    display: flex;
    justify-content: space-around;
  }
</style>
